﻿<template>
	<div class="card-fill layout-padding" v-loading="loading" element-loading-text="Loading...">
		<el-card shadow="hover" class="layout-padding-auto create-form">
			<el-form ref="formRef" :model="stateData.vmModel" label-width="100px">
				<el-row :gutter="20">
					<el-col :xs="24" :lg="12" class="mb20">
						<el-form-item
							ref="Entity_Code_FormItem"
							prop="Entity.Code"
							label="岗位编号"
							:rules="[{ required: true, message: '岗位编号为必填项', trigger: 'blur' }]"
						>
							<el-input v-model="stateData.vmModel.Entity.Code" disabled clearable class="width100"></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :lg="12" class="mb20">
						<el-form-item
							ref="Entity_Name_FormItem"
							prop="Entity.Name"
							label="岗位名称"
							:rules="[{ required: true, message: '岗位名称为必填项', trigger: 'blur' }]"
						>
							<el-input v-model="stateData.vmModel.Entity.Name" disabled clearable class="width100"></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :lg="12" class="mb20">
						<el-form-item ref="Entity_GroupId_FormItem" prop="Entity.GroupId">
							<template #label>
								<WtmLabelTooltip label="所属部门" tooltip="关联的部门" />
							</template>
							<el-cascader
								:options="stateData.AllSysGroups"
								:props="{ checkStrictly: true, emitPath: false, label: 'Text', value: 'Value', children: 'Children' }"
								clearable
								filterable
								class="width100"
								v-model="stateData.vmModel.Entity.GroupId"
								disabled
							/>
						</el-form-item>
					</el-col>

					<el-col :xs="24" :lg="12" class="mb20">
						<el-form-item ref="Entity_IsManager_FormItem" prop="Entity.IsManager">
							<template #label>
								<WtmLabelTooltip label="是否管理" tooltip="是否为管理岗位" />
							</template>
							<el-switch v-model="stateData.vmModel.Entity.IsManager" disabled />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :lg="12" class="mb20">
						<el-form-item ref="Entity_Order_FormItem" prop="Entity.Order" label="排序">
							<el-input-number v-model="stateData.vmModel.Entity.Order" :step="0.01" class="width100" disabled></el-input-number>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :lg="12" class="mb20">
						<el-form-item ref="Entity_Salary_FormItem" prop="Entity.Salary" label="岗位薪资">
							<el-input-number v-model="stateData.vmModel.Entity.Salary" :step="0.01" class="width100" disabled></el-input-number>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :xs="24" :lg="24" class="mb20">
						<el-form-item ref="SelectedRolesIds_FormItem" prop="SelectedRolesIds" label="角色">
							<el-transfer
								v-model="stateData.vmModel.SelectedRolesIds"
								:data="stateData.AllFrameworkRoles"
								disabled
								:titles="['可选角色', '已选角色']"
								:props="{ key: 'Value', label: 'Text', disabled: 'Disabled' }"
								clearable
							></el-transfer>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :lg="24" class="mb20">
						<el-form-item label="组织">
							<el-transfer
								v-model="stateData.vmModel.SelectedOrganizationIds"
								:titles="['可选组织', '已选组织']"
								:data="stateData.AllOrganizations"
								:props="{ key: 'Value', label: 'Text', disabled: 'Disabled' }"
							/>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :lg="24" class="mb20">
						<el-form-item ref="Entity_Description_FormItem" prop="Entity.Description" label="岗位描述">
							<el-input v-model="stateData.vmModel.Entity.Description" disabled clearable class="width100"></el-input>
							<WtmMdEditor v-model="stateData.vmModel.Entity.Description" :disabled="true" height="200px" />
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</el-card>
	</div>
</template>

<script setup lang="ts" name="message._system.common.vm.edit;false">
import { reactive, ref, getCurrentInstance, onMounted, watch, nextTick } from 'vue';
import { SysJobPositionApi as api } from '/@/views/_admin/sysjobposition/api';
import other from '/@/utils/other';
import { useRouter } from 'vue-router';
import { ISysJobPositionVm } from '/@/views/_admin/sysjobposition/api/interface';
import { IViewModel } from '/@/types/common';
import { commonApi } from '/@/api/common';

const ci = getCurrentInstance() as any;
const loading = ref(false);
// 定义变量内容
const formRef = ref();
const stateData = reactive<IViewModel<ISysJobPositionVm>>({
	vmModel: {
		Entity: {
			ID: null,
			Code: null,
			Name: null,
			Description: null,
			GroupId: null,
			Roles: null,
			IsManager: null,
			Order: null, // 新增排序字段
			Salary: null, // 新增岗位薪资字段
		},
		SelectedRolesIds: [],
		SelectedOrganizationIds: [] as string[],
	},

	AllSysGroups: [] as any[],
	AllFrameworkRoles: [] as any[],
	AllOrganizations: [] as any[],
});

watch(
	() => stateData.vmModel.Entity.GroupId,
	async (newParentId) => {
		let res;
		if (newParentId) {
			// 有父级，带groupId参数
			res = await commonApi().getOrganizations(newParentId);
			stateData.AllOrganizations = (Array.isArray(res) ? res : []).map((item) => ({ ...item, Disabled: true }));
		} else {
			// 无父级，不查组织，直接清空
			stateData.AllOrganizations = [];
		}
		// 详情页只展示，SelectedOrganizationIds应由接口数据回填
	},
	{ immediate: false }
);
// 取消
const onClose = () => {
	closeDialog();
};

// 页面加载时
onMounted(() => {
	loading.value = true;
	if (ci.attrs['wtmdata']) {
		stateData.vmModel.Entity.ID = ci.attrs['wtmdata'].ID;
	} else if (useRouter().currentRoute.value.query.id) {
		stateData.vmModel.Entity.ID = useRouter().currentRoute.value.query.id as any;
	}
	const promises: Promise<any>[] = [
		other.getSelectList('/api/common/GetGroups?auth=false', [], false).then((x) => {
			stateData.AllSysGroups = x;
		}),
		other.getSelectList('/api/SysJobPosition/GetFrameworkRoles', [], false).then((x) => {
			stateData.AllFrameworkRoles = x.map((item) => ({ ...item, Disabled: true }));
		}),
		api()
			.get(stateData.vmModel.Entity.ID ?? '')
			.then((data: any) => other.setValue(stateData.vmModel, data)),
	];
	Promise.allSettled(promises).finally(async () => {
		loading.value = false;
		nextTick(() => {
			setupHeaderButtons();
		});
	});
});

// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh', 'closeDialog', 'updateHeaderButtons']);
// 关闭弹窗
const closeDialog = () => {
	emit('closeDialog');
};

// 设置对话框头部按钮
const setupHeaderButtons = () => {
	const headerButtons = [
		{
			text: ci.proxy.$t('message._system.common.vm.cancel'),
			type: 'default',
			onClick: onClose,
			visible: true,
		},
	];

	emit('updateHeaderButtons', headerButtons);
};
</script>
